<script lang="ts">
  import { ExampleWrapper, HighlightCompo, transformComponents, transformModules } from "svelte-rune-highlight";
  import type { Component } from "svelte";
  import { Table } from "$lib";
  import { clipboardManagerProps } from "./clipboardManagerProps";
  import { List, Li, P, Heading } from "$lib";

  const componentModules = import.meta.glob("./examples/*.svelte", {
    eager: true
  }) as Record<string, { default: Component }>;

  // Import source code
  const exampleModules = import.meta.glob("./examples/*.svelte", {
    query: "?raw",
    import: "default",
    eager: true
  }) as Record<string, string>;

  // Transform both using helper functions
  const components = transformComponents(componentModules);
  const modules = transformModules(exampleModules);

  const sensitiveEx = "detectSensitiveData=(text) => (/confidential|secret/i).test(text)";
</script>

<div class="mx-auto max-w-7xl space-y-8 p-6">
  <div class="space-y-2">
    <Heading tag="h1" class="my-4 text-4xl">Clipboard Manager</Heading>
    <P>Real-world examples showing how to use the selection bubble menu feature</P>
  </div>

  <ExampleWrapper component={components["Interactive"]} code={modules["Interactive"]} />

  <!-- Usage Examples -->
  <section class="space-y-6">
    <Heading tag="h2" class="text-2xl font-semibold">📚 Usage Examples</Heading>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800">Basic</span>
        <Heading tag="h3" class="text-lg font-semibold">Enable Selection Menu</Heading>
      </div>
      <P class="text-sm">Simplest setup - enable selection on entire page</P>
      <HighlightCompo code={modules["EnableSelectionMenu"] as string} class="max-w-7xl bg-white" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-800">Targeted</span>
        <Heading tag="h3" class="my-4 text-lg font-semibold">Target Specific Area</Heading>
      </div>
      <P class="text-sm">
        Limit selection menu to specific content area using CSS selector using <code class="text-primary-700 font-bold">selectionTarget</code>
        prop.
      </P>
      <P class="text-sm">
        Use <code class="text-primary-700 font-bold">enableSelectionMenu</code>
        to show selection bubble menu.
      </P>
      <ExampleWrapper component={components["TargetSpecific"]} code={modules["TargetSpecific"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-800">Modal</span>
        <Heading tag="h3" class="my-4 text-lg font-semibold">Modal</Heading>
      </div>
      <P class="text-sm">Display the clipboard manager in a modal dialog. Select any text in the paragraph to save it using the selection bubble menu.</P>
      <P class="text-sm">
        Set <code class="text-primary-700 font-bold">storageKey</code>
        to customize the localStorage key name.
      </P>
      <ExampleWrapper component={components["WithModal"]} code={modules["WithModal"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-800">Documentation</span>
        <Heading tag="h3" class="text-lg font-semibold">Documentation Site</Heading>
      </div>
      <P class="text-sm">Perfect for docs where users need to save commands, code snippets, or API examples</P>
      <P class="text-sm">
        Use <code class="text-primary-700 font-bold">items</code>
        prop to set initial value. Use
        <code class="text-primary-700 font-bold">limit</code>
        prop to set max items to store.
      </P>
      <ExampleWrapper component={components["DocumentationSite"]} code={modules["DocumentationSite"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-800">Content</span>
        <Heading tag="h3" class="text-lg font-semibold">Blog/Article Reader</Heading>
      </div>
      <P class="text-sm">Let readers save quotes, insights, or key points while reading</P>
      <P class="text-sm">
        Use <code class="text-primary-700 font-bold">saveLabel</code>
        and
        <code class="text-primary-700 font-bold">clearLabel</code>
        to change labels.
      </P>
      <ExampleWrapper component={components["BlogReader"]} code={modules["BlogReader"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-pink-100 px-2.5 py-0.5 text-xs font-semibold text-pink-800">Support</span>
        <Heading tag="h3" class="text-lg font-semibold">Email Client / Support Dashboard</Heading>
      </div>
      <P class="text-sm">Quick responses with ability to save new ones from actual emails</P>
      <ExampleWrapper component={components["EmailClient"]} code={modules["EmailClient"]} innerClass="p-4" />
    </div>

    <!-- Example 6 -->
    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-yellow-100 px-2.5 py-0.5 text-xs font-semibold text-yellow-800">localStorage</span>
        <Heading tag="h3" class="text-lg font-semibold">Save to Store</Heading>
      </div>
      <P class="text-sm">
        The <code class="text-primary-700">saveToStorage</code>
        prop controls whether the clipboard items are saved to localStorage so they survive page refreshes and browser sessions.
      </P>

      <Heading tag="h3" class="text-md my-4">
        When <code class="text-primary-700">saveToStorage={true}</code>
        (default):
      </Heading>
      <List>
        <Li>Items are automatically saved to localStorage whenever they change</Li>
        <Li>When you reload the page, all your clipboard items are restored</Li>
        <Li>Data persists across browser sessions</Li>
      </List>

      <Heading tag="h3" class="text-md my-4">
        When <code class="text-primary-700">saveToStorage={false}</code>
        :
      </Heading>
      <List>
        <Li>Items only exist in memory during the current session</Li>
        <Li>Refreshing the page clears all clipboard items</Li>
        <Li>Data is lost when you close the tab</Li>
      </List>
      <ExampleWrapper component={components["SaveToStorage"]} code={modules["SaveToStorage"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-800">Developer</span>
        <Heading tag="h3" class="text-lg font-semibold">Code Editor with Snippets</Heading>
      </div>
      <P class="text-sm">Save frequently used code patterns directly from the editor.</P>
      <P class="text-sm">
        Use <code class="text-primary-700">filterSensitive={false}</code>
        to unblock sensitive data such as password pattern, api token pattern, etc. The component provide default function (see below) to detect sensitive data. However use the
        <code class="text-primary-700">detectSensitiveData</code>
        prop to provide your own logic.
      </P>
      <HighlightCompo code={sensitiveEx} class="my-2 max-w-7xl bg-white" />
      <P>This will block texts containing "confidential" or "secret".</P>
      <List>
        <Li>Detects common sensitive information (credit cards, passwords, API keys, credentials).</Li>
        <Li>⚠️ Note: These patterns are heuristic and may produce false positives/negatives.</Li>
        <Li>Credit card regex may match any 16-digit sequence, not just valid card numbers</Li>
        <Li>Password regex is intentionally strict (12+ chars, mixed case, digits) and misses many real passwords</Li>
        <Li>API key regex matches any long alphanumeric token (32+ chars), which may catch legitimate IDs</Li>
        <Li>Credential keyword regex may trigger on non-secret words like "token = false"</Li>
      </List>
      <ExampleWrapper component={components["CodeEditor"]} code={modules["CodeEditor"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-teal-100 px-2.5 py-0.5 text-xs font-semibold text-teal-800">Advanced</span>
        <Heading tag="h3" class="text-lg font-semibold">Multiple Content Areas</Heading>
      </div>
      <P class="text-sm">Use class selector to enable selection across multiple elements</P>
      <ExampleWrapper component={components["MultipleContent"]} code={modules["MultipleContent"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-red-100 px-2.5 py-0.5 text-xs font-semibold text-red-800">Selection Only</span>
        <Heading tag="h3" class="text-lg font-semibold">No Manual Input</Heading>
      </div>
      <P class="text-sm">
        Use <code class="text-primary-700">showInput={false}</code>
        to hide the input box and use only selection menu with custom rendering
      </P>
      <ExampleWrapper component={components["NoManualInput"]} code={modules["NoManualInput"]} innerClass="p-4" />
    </div>

    <div class="space-y-3 rounded-lg p-6 shadow">
      <div class="flex items-center gap-3">
        <span class="rounded bg-gray-100 px-2.5 py-0.5 text-xs font-semibold text-gray-800">Custom</span>
        <Heading tag="h3" class="text-lg font-semibold">Custom Empty State</Heading>
      </div>
      <P class="text-sm">Provide clear instructions for first-time users</P>
      <ExampleWrapper component={components["CustomEmptyState"]} code={modules["CustomEmptyState"]} innerClass="p-4" />
    </div>
  </section>

  <section class="space-y-4 rounded-lg p-6 shadow">
    <Heading tag="h2" class="text-2xl font-semibold">💡 Best Practices</Heading>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <div class="border-l-4 border-green-500 pl-4">
        <Heading tag="h3" class="mb-2 font-semibold text-green-900">✅ Do</Heading>
        <List class="space-y-1 text-sm text-gray-700 dark:text-gray-50">
          <Li>• Target specific content areas</Li>
          <Li>• Use for text-heavy interfaces</Li>
          <Li>• Combine with manual input option</Li>
          <Li>• Show clear visual feedback</Li>
          <Li>• Test on mobile/touch devices</Li>
        </List>
      </div>
      <div class="border-l-4 border-red-500 pl-4">
        <Heading tag="h3" class="mb-2 font-semibold text-red-900">❌ Don't</Heading>
        <List class="space-y-1 text-sm text-gray-700 dark:text-gray-50">
          <Li>• Enable on form inputs</Li>
          <Li>• Use for tiny text snippets</Li>
          <Li>• Forget mobile considerations</Li>
          <Li>• Overwhelm with too many features</Li>
          <Li>• Target entire page unnecessarily</Li>
        </List>
      </div>
    </div>
  </section>

  <!-- Comparison -->
  <section class="rounded-lg bg-gradient-to-r from-green-50 to-blue-50 p-6">
    <Heading tag="h2" class="mb-4 text-2xl font-semibold">🔄 Selection Menu vs Manual Input</Heading>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-lg p-4">
        <Heading tag="h3" class="mb-3 flex items-center gap-2 font-semibold">
          <span class="text-2xl">👆</span>
          Selection Menu
        </Heading>
        <List class="space-y-2 text-sm">
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>Faster for existing content</span>
          </Li>
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>No context switching</span>
          </Li>
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>Natural workflow</span>
          </Li>
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>Works on mobile</span>
          </Li>
        </List>
      </div>
      <div class="rounded-lg p-4">
        <Heading tag="h3" class="mb-3 flex items-center gap-2 font-semibold">
          <span class="text-2xl">⌨️</span>
          Manual Input
        </Heading>
        <List class="space-y-2 text-sm">
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>Create new snippets</span>
          </Li>
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>Edit before saving</span>
          </Li>
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>Paste from external sources</span>
          </Li>
          <Li class="flex items-start gap-2">
            <span class="text-green-500">✓</span>
            <span>More control</span>
          </Li>
        </List>
      </div>
    </div>
    <p class="mt-4 text-center text-sm text-gray-600">
      💡 <strong>Pro tip:</strong>
      Enable both for maximum flexibility!
    </p>
  </section>

  <section class="space-y-6">
    <Heading tag="h2" class="text-2xl font-semibold">Props</Heading>
    <Table items={clipboardManagerProps} hoverable />
  </section>
</div>
